<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
      layout:decorate="~{layout/default.html(bodyClass='body-wrapper')}">
<head>
    <title>登录</title>
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" th:href="@{/css/admin/other/login.css}"/>
    <style th:inline="css">
        .body-wrapper {
            background-image: url('[(@{/img/background.svg})]');
            background-size: cover;
        }
    </style>
</head>
<!-- 代 码 结 构 -->
<body>
<section layout:fragment="wrapper">
    <form class="layui-form" action="javascript:void(0);">
        <div class="layui-form-item">
            <img class="logo" th:src="@{/img/logo.png}"/>
            <div class="title">yuyuan</div>
            <div class="desc">

            </div>
        </div>
        <div class="layui-form-item" th:if="${param.error}">
            <label id="errors" class="error" th:if="${param.error}"
                   th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}"></label>
        </div>
        <div class="layui-form-item">
            <input placeholder="账 户 : admin " name="username" lay-verify="required" hover class="layui-input"/>
        </div>
        <div class="layui-form-item">
            <input placeholder="密 码 : admin " name="password" lay-verify="required" hover class="layui-input"/>
        </div>
        <div class="layui-form-item">
            <input placeholder="验证码 : " hover lay-verify="required" class="code layui-input layui-input-inline"/>
            <img th:src="@{/img/captcha.gif}" class="codeImage"/>
        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="rememberMe" title="记住密码" value="1" lay-skin="primary" checked>
        </div>
        <div class="layui-form-item">
            <button type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
                登 入
            </button>
        </div>
    </form>
    <script>
        layui.use(['form', 'jquery', 'button', 'button', 'popup'], function () {
            let form = layui.form;
            let button = layui.button;
            let $ = layui.jquery;
            let popup = layui.popup;

            // 登 录 提 交
            form.on('submit(login)', function (data) {
                // 防止重复提交
                button.load({
                    elem: '[lay-submit]',
                    time: 2000,
                    done: function() {
                    }
                })

                /// 验证

                /// 登录
                $.ajax({
                    url: '[(@{/a/login})]',
                    data: data.field,
                    dataType: 'json',
                    contentType: 'application/x-www-form-urlencoded',
                    type: 'post',
                    success: function (result) {
                        if (result.code === '20000') {
                            /// 动画
                            button.load({
                                elem: '.login',
                                time: 1500,
                                done: function () {
                                    popup.success("登录成功", function () {
                                        location.href = '[(@{/a})]'
                                    });
                                }
                            })
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })

                return false;
            });
        });

        (function () {
            // 不是顶层就
            window !== top
            && window.location.host === top.location.host
            && (top.location.href = '[(@{/a/login})]');
        })();
    </script>
</section>
</body>
</html>
